<script setup>
	import { onMounted, ref, computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useCartStore } from '@/store/cart'
	import { useUserStore } from '@/store/userInfo'

	const props = defineProps( {
		proId: String
	} )

	// 页面云对象
	const proApi = uniCloud.importObject( 'product' )
	const proDetailData = ref( {} )
	const proDetailGet = async ( proId ) => {
		const res = await proApi.getList( proId )
		proDetailData.value = res.data[ 0 ]
		console.log( '商品详情:', proDetailData.value )
	}

	// 评论列表数据
	const commentList = ref( [ ] )

	// 购物车数量
	const cartCount = ref( 0 )

	const cartStore = useCartStore( )
	const userStore = useUserStore( )

	// 获取购物车总数
	const totalCount = computed( ( ) => cartStore.totalCount )

	// 跳转到购物车页面
	const goToCart = ( ) => {
		uni.switchTab( {
			url: '/pages/cart/cart'
		} )
	}

	// 添加到购物车
	const addToCart = ( ) => {
		if ( !userStore.userInfo.uid ) {
			uni.showModal( {
				title: '提示',
				content: '请先登录',
				confirmText: "登录",
				success( res ) {
					if ( res.confirm ) {
						uni.navigateTo( {
							url: "/pages/login/login"
						} )
					}
				}
			} )
			return
		}

		// 构建商品数据
		const product = {
			pro_id: proDetailData.value._id,
			name: proDetailData.value.name,
			cover_pic: proDetailData.value.cover_pic,
			buy_price: proDetailData.value.buy_price,
			original_price: proDetailData.value.original_price,
			num: 1
		}

		cartStore.addToCart( [ product ] )
		uni.showToast( {
			title: '已加入购物车',
			icon: 'success'
		} )
	}

	// 立即购买
	const buyNow = ( ) => {
		if ( !userStore.userInfo.uid ) {
			uni.showModal( {
				title: '提示',
				content: '请先登录',
				confirmText: "登录",
				success( res ) {
					if ( res.confirm ) {
						uni.navigateTo( {
							url: "/pages/login/login"
						} )
					}
				}
			} )
			return
		}

		addToCart( ) // 先加入购物车
		uni.switchTab( {
			url: '/pages/cart/cart'
		} )
	}

	onMounted( ( ) => {
		console.log( '商品ID', props.proId )
		proDetailGet( props.proId )
	} )
</script>

<template>
	<view class="product-detail">
		<!-- 商品主图改为轮播图 -->
		<view class="cover-section">
			<swiper class="swiper" circular indicator-dots autoplay :interval="3000" :duration="500">
				<!-- 如果有轮播图数据，则渲染轮播图 -->
				<template v-if="proDetailData.banner_pic && proDetailData.banner_pic.length > 0">
					<swiper-item v-for="(pic, index) in proDetailData.banner_pic" :key="index">
						<image class="cover-image" :src="pic" mode="aspectFill" />
					</swiper-item>
				</template>
				<!-- 如果没有轮播图，则渲染封面图 -->
				<swiper-item v-else>
					<image class="cover-image" :src="proDetailData.cover_pic" mode="aspectFill" />
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品基本信息 -->
		<view class="info-section">
			<view class="price-row">
				<view class="price-info">
					<text class="current-price">¥{{ proDetailData.buy_price?.toFixed(2) }}</text>
					<text class="original-price">¥{{ proDetailData.original_price }}</text>
					<text class="discount-tag">{{ proDetailData.discount }}折</text>
				</view>
				<button class="share-btn" open-type="share">
					<up-icon name="share" size="20" color="#666"></up-icon>
					<text>分享</text>
				</button>
			</view>
			<view class="name-row">
				<text class="name">{{ proDetailData.name }}</text>
			</view>
		</view>

		<!-- 评论区域 -->
		<view class="comment-section">
			<view class="section-header">
				<text class="title">商品评论</text>
				<text class="count">({{ commentList.length }})</text>
			</view>
			<view class="comment-list">
				<template v-if="commentList.length > 0">
					<view class="comment-item" v-for="item in commentList" :key="item._id">
						<view class="user-info">
							<image class="avatar" :src="item.avatar" mode="aspectFill" />
							<text class="nickname">{{ item.nickname }}</text>
							<text class="time">{{ item.create_time }}</text>
						</view>
						<view class="content">{{ item.content }}</view>
					</view>
				</template>
				<view v-else class="empty-comment">
					<text>暂无评论</text>
				</view>
			</view>
		</view>

		<!-- 推荐商品区域 -->
		<view class="recommend-section">
			<view class="title">热门推荐</view>
			<product></product>
		</view>

		<!-- 底部安全区域 -->
		<view class="safe-area"></view>

		<!-- 底部购买栏 -->
		<view class="footer" :class="{ 'footer-index': false }">
			<view class="footer-left">
				<!-- 购物车 -->
				<view class="cartIcon" @tap="goToCart">
					<up-badge type="error" :absolute="true" :offset="[-6,-8]" max="99"
						:value="cartStore.totalCount"></up-badge>
					<up-icon name="shopping-cart" color="#ed544f" size="26"></up-icon>
				</view>
				<view class="total">
					<text>合计:</text>
					<text class="price">¥{{ cartStore.totalPrice.toFixed(2) }}</text>
				</view>
			</view>
			<view class="ready">
				<button class="btn cart-btn" @tap="addToCart">加入购物车</button>
				<button class="btn buy-btn" @tap="buyNow">立即购买</button>
			</view>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	.product-detail {
		@include pageStyle;
		padding-bottom: env(safe-area-inset-bottom);

		.cover-section {
			width: 100%;
			height: 750rpx;
			background-color: #fff;

			.swiper {
				width: 100%;
				height: 100%;

				.cover-image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.info-section {
			margin-top: 24rpx;
			padding: 24rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.price-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 16rpx;

				.price-info {
					display: flex;
					align-items: center;
					flex: 1;

					.current-price {
						font-size: 40rpx;
						font-weight: bold;
						color: $brand-ts-color;
						margin-right: 12rpx;
					}

					.original-price {
						font-size: 28rpx;
						color: $text-font-color-3;
						text-decoration: line-through;
						margin-right: 12rpx;
					}

					.discount-tag {
						padding: 4rpx 12rpx;
						font-size: 24rpx;
						color: $brand-ts-color;
						background-color: #fff1f0;
						border-radius: 4rpx;
					}
				}

				.share-btn {
					display: flex;
					align-items: center;
					flex-shrink: 0;
					padding: 8rpx 16rpx;
					font-size: 24rpx;
					color: $text-font-color-2;
					background-color: $card-bg-color;
					border-radius: 4rpx;
					margin-left: 24rpx;

					&::after {
						border: none;
					}

					text {
						margin-left: 4rpx;
					}

					&:active {
						opacity: 0.8;
					}
				}
			}

			.name-row {
				.name {
					font-size: 32rpx;
					color: $text-font-color-1;
					font-weight: 600;
					@include textShenglue(2);
				}
			}
		}

		.comment-section {
			margin-top: 24rpx;
			padding: 24rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.section-header {
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;

				.title {
					font-size: 28rpx;
					color: $text-font-color-1;
					font-weight: 600;
				}

				.count {
					font-size: 24rpx;
					color: $text-font-color-3;
					margin-left: 8rpx;
				}
			}

			.comment-list {
				.comment-item {
					padding: 24rpx 0;
					border-bottom: 2rpx solid $line-color-aux;

					&:last-child {
						border-bottom: none;
						padding-bottom: 0;
					}

					.user-info {
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;

						.avatar {
							width: 64rpx;
							height: 64rpx;
							border-radius: 50%;
							margin-right: 16rpx;
						}

						.nickname {
							font-size: 26rpx;
							color: $text-font-color-1;
							margin-right: 16rpx;
						}

						.time {
							font-size: 24rpx;
							color: $text-font-color-3;
						}
					}

					.content {
						font-size: 26rpx;
						color: $text-font-color-2;
						line-height: 1.6;
					}
				}

				.empty-comment {
					padding: 48rpx 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 16rpx;

					text {
						font-size: 28rpx;
						color: $text-font-color-3;
					}
				}
			}
		}

		.recommend-section {
			margin-top: 24rpx;
			padding: 24rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 164rpx;

			.title {
				font-size: 32rpx;
				color: $text-font-color-1;
				font-weight: 600;
				margin-bottom: 24rpx;
			}
		}

		.footer {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 16rpx 24rpx 32rpx;
			width: 100%;
			background-color: #fff;
			border-top: 1px solid $line-color-aux;
			z-index: 999;
			height: fit-content;

			.footer-left {
				display: flex;
				align-items: center;

				.cartIcon {
					position: relative;
					margin-right: 16rpx;
					padding: 16rpx;
					height: fit-content;
					background-color: $card-bg-color;
					border-radius: 16rpx;
				}

				.total {
					display: flex;
					align-items: baseline;
					font-size: 28rpx;
					color: $text-font-color-2;

					.price {
						font-size: 32rpx;
						font-weight: bold;
						color: $brand-ts-color;
						margin-left: 8rpx;
					}
				}
			}

			.ready {
				display: flex;
				gap: 24rpx;

				.btn {
					width: 200rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					border-radius: 80rpx;
					font-size: 28rpx;
					margin: 0;
					padding: 0;

					&::after {
						border: none;
					}

					&.cart-btn {
						background-color: rgba($brand-theme-color, 0.1);
						color: $brand-theme-color;
					}

					&.buy-btn {
						background-color: #ff4d4f;
						color: #fff;
					}

					&:active {
						opacity: 0.8;
					}
				}
			}
		}

		.footer-index {
			height: 82px;
		}
	}
</style>